<template>
  <div id="topdesc">
    <!-- 图片展示-->
    <div class="left-img">
      <img v-lazy="cover" alt="" style="width: 240px; height: 240px" />
    </div>
    <div class="right-desc">
      <!-- 歌词标题 -->
      <div class="title">
         <el-tag type="success" effect="plain">歌单</el-tag>
         <h2>{{playlist.name}}</h2>
      </div>
      <!-- 用户名称和创建时间 -->
      <div class="create-info">
        <!-- 头像展示 -->
        <div class="avatar">
            <el-avatar :size="50" :src="playlist.creator.avatarUrl"></el-avatar>
        </div>
        <!-- 用户名 -->
        <div class="uname">
            <span>{{playlist.creator.nickname}}</span>
        </div>
        <!-- 创建时间信息 -->
        <div class="create-time">
          <p v-if="playlist.createTime && !playlist.ToplistType">创建时间：{{ playlist.createTime | showDate }}</p>
					<p v-if="playlist.ToplistType && playlist.trackUpdateTime">最近更新时间：{{ playlist.trackUpdateTime | showDate }}</p>
        </div>
      </div>
      <!-- 播放按钮 -->
      <div class="operation">
        <el-button type="primary" icon="el-icon-video-play" @click="playAll">播放全部</el-button>
        <el-button
          v-if="$store.state.login.userInfo == null || ($store.state.login.userInfo.userId && playlist.creator.userId != $store.state.login.userInfo.userId)" 
          :icon="isSub?'el-icon-folder-checked':'el-icon-folder-add'" 
          :type="isSub?'primary':'default'" 
          @click="subSongList"><span>{{ isSub ? "已收藏" : "收藏" }}</span></el-button>
        <el-button icon="el-icon-share">分享{{playlist.shareCount}}</el-button>
      </div>
      <!-- 歌曲标签 -->
    <div class="tags" v-if="playlist.tags.length !== 0">
        <span>标签：</span>
        <el-tag type="success" effect="plain" size="small"  v-for="(item,index) in playlist.tags" :key="index">{{item}}</el-tag>
    </div>
      <!-- 歌曲数目播放数目 -->
      <div class="song-count">
        <span>歌曲：{{playlist.trackCount}}首</span>
        <span>播放：{{playlist.playCount}}次</span>
      </div>
      <!-- 歌曲详情-->
      <div class="desc-info">
        <span v-if="playlist.description">简介：{{playlist.description}}</span>
        <span v-else>简介：暂无简介</span>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate } from "@/common/formatDate";
export default {
  name: "",
  props:{
    playlist:{
      type:Object,
      default(){
        return false;
      }
    },
    isSub: {
			type: Boolean,
			default() {
				return false;
			},
		},
  },
  data() {
    return {
      avatarUrl:''
    };
  },
  methods: {
    // 播放全部歌曲
    playAll(){
      this.$emit('playAllSongs')
    },
    // 收藏歌单
    subSongList(){
        if (!this.$store.state.login.isLogin) {
          this.$message({
            type: "warning",
            message: "登录后才能收藏",
            showClose: true,
            center: true,
          });
				return;
			}
      this.$emit('subSongListBy')
    }
  },
  created() {},
  computed:{
    cover(){
      return this.playlist.coverImgUrl;
    }
  },
  filters: {
		showDate(value) {
			const date = new Date(value);
			return formatDate(date, "yyyy-MM-dd");
		},
	},
};
</script>
<style lang="less" scoped>
#topdesc {
  display: flex;
  align-items: center;
  .left-img { 
    height: 100%;
    img {
      width: 100%;
    }
  }
  .right-desc {
    flex: 1;
    padding-left: 15px;
    .title{
        display: flex;
        .el-tag{
            height: 30px;
			font-size: 16px;
			font-weight: 700;
            margin-right: 15px;
        }
    }
    .create-info{
        display: flex;
        align-items: center;
        margin-top: 8px;
        .uname{
            font-size: 16px;
            padding-left: 10px;
            cursor: pointer;
            color: rgb(22, 133, 236);

        }
        .create-time{
            display: flex;
            padding-left: 15px;
            p{
                margin-right: 10px;
            }
        }
        
    }
    
    .tags{
        font-size: 16px;
        .el-tag{
            margin-top: 10px;
            margin-right: 8px;
        }
    }
    .song-count{
        margin-top: 8px;
        font-size: 16px;   
        span{
            margin-right: 15px;
        }
    }
    .desc-info{
      margin-top: 8px;
      font-size: 16px; 
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;


    }
  }
}
</style>